<template>
    <div class="panel admin-panel">
        <div>&nbsp;&nbsp;
            <input type="hidden" value="1" name="pageNum" id="pageNum">
            <input type="hidden" value="" name="pageSize" id="pageSize">
            不符合项编号:<input type="text" name="userAccount" id="name" class="small"
                v-model="nonconformanceVo.nonconformance.identifier" style="width:100px">
            &nbsp;发起时间:<input type="datetime-local" step="01" name="startTime" id="startTime"
                v-model="nonconformanceVo.nonconformance.selectStartTime">至
            <input type="datetime-local" step="01" name="endTime" id="endTime"
                v-model="nonconformanceVo.nonconformance.selectEndTime">
            &nbsp;
            <el-button type="primary" size="medium" @click="page()">筛选</el-button>
            <el-button type="success" size="medium" @click="reset()">重置</el-button>
            <br />
            <el-button type="primary" size="small" @click="initiate">发起</el-button>
            <el-button type="primary" size="small" @click="del">删除</el-button>
            <el-button type="primary" size="small" @click="viewProcess">查看流程</el-button>
            <el-button type="primary" size="small" @click="dialogFormVisible = true">新增</el-button>

            <el-dialog title="选择审批人" :visible.sync="processVisible" :append-to-body="true" style="width:1000px">
                <el-form ref="form" :model="ActivitiCompleteEntity" label-width="60px">.
                    <el-radio v-model="ActivitiCompleteEntity.nextUsers[0]" :label="user.workNumber" 
                        v-for="(user,i) in users" :key="i" style="display:block">{{user.name+" "+user.workNumber}}</el-radio>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="processVisible = false">取 消</el-button>
                    <el-button type="primary" @click="processSubmit">确 定</el-button>
                </div>
            </el-dialog>

            <el-dialog title="查看流程" :visible.sync="viewProcessVisible" :append-to-body="true" width="70%">
                <img src="http://localhost:10001/ncr.png" width="100%"/><br/>
                <el-table :data="ActivitiHistoryInfoEntity" stripe style="width: 100%" v-loading="loding" element-loading-text="拼命加载中"
                    highlight-current-row @current-change="tableSel">
                    <el-table-column type="index" label="序号" width="70">
                    </el-table-column>
                    <el-table-column prop="activitiName" label="流程名" width="170">
                    </el-table-column>
                    <el-table-column prop="assignee" label="审批人" width="170">
                    </el-table-column>
                    <el-table-column prop="startTime" label="开始时间" width="200">
                    </el-table-column>
                    <el-table-column prop="endTime" label="结束时间" width="200">
                    </el-table-column>

                </el-table>

                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="viewProcessVisible = false">确 定</el-button>
                </div>
            </el-dialog>

            <el-dialog title="新增不符合项" :visible.sync="dialogFormVisible" :append-to-body="true">
                <el-form ref="form" :model="newNonconformance" label-width="120px">
                    <el-form-item label="不符合项编号">
                        <el-input v-model="newNonconformance.identifier" placeholder="请输入不符合项编号"></el-input>
                        <!-- <span style="color: red;">{{nameMsg}}</span> -->
                    </el-form-item>
                    <el-form-item label="项目">
                        <el-select v-model="newNonconformance.project.id" placeholder="请选择项目">
                            <el-option v-for="project in projects" :key="project.id" :label="project.name"
                                :value="project.id" seleted>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="依据文件">
                        <el-input v-model="newNonconformance.basisDocuments" placeholder="请填写依据文件"></el-input>
                    </el-form-item>
                    <el-form-item label="物料编号">
                        <el-input v-model="newNonconformance.inventoryBookkeeping.materialArchive.materialNumber" placeholder="请填写物料编号">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="批次号(二选一)">
                        <el-input v-model="newNonconformance.inventoryBookkeeping.batchNumber" placeholder="请填写物料批次号">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="工单号(二选一)">
                        <el-input v-model="newNonconformance.inventoryBookkeeping.workOrderNumber"
                            placeholder="请填写物料工单号"></el-input>
                    </el-form-item>
                    <el-form-item label="不符合项内容">
                        <el-input type="textarea" v-model="newNonconformance.profile" placeholder="请填写不符合项内容">
                        </el-input>
                    </el-form-item>

                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="ncrSubmit">确 定</el-button>
                </div>
            </el-dialog>

        </div>


        <!-- <div class="panel-head">
            <strong class="icon-reorder"> 个人不符合项列表</strong>
        </div> -->
        <el-table :data="nonconformances" stripe style="width: 100%" v-loading="loding" element-loading-text="拼命加载中"
            highlight-current-row @current-change="tableSel">
            <el-table-column type="index" label="序号" width="70">
            </el-table-column>
            <el-table-column prop="activitiState" label="流程状态" width="130">
            </el-table-column>
            <el-table-column prop="identifier" label="编号" width="130">
            </el-table-column>
            <el-table-column prop="user.name" label="发起人" width="100">
            </el-table-column>
            <el-table-column prop="project.no" label="项目编号" width="130">
            </el-table-column>
            <el-table-column prop="startTime" label="发起时间" width="200">
            </el-table-column>
            <el-table-column prop="inventoryBookkeeping.materialArchive.materialName" label="物料名称" width="200">
            </el-table-column>
            <el-table-column prop="profile" label="不符合项内容" width="200">
            </el-table-column>

        </el-table>
        <br />
        <div>&nbsp;&nbsp;
            <input type="button" class="button" value="首页" @click="page('start')" />&nbsp;
            <input type="button" class="button" value="上一页" @click="page('up')" />
            当前第<input type="text" :value="nonconformanceVo.currPage" @change="page('text')" style="width:40px;"
                id="currPage">页/共
            {{ totalPage }}页
            <input type="button" class="button" value="下一页" @click="page('down')" />&nbsp;
            <input type="button" class="button" value="尾页" @click="page('end')" />
            总数量:{{ totalNum }}&nbsp;
            分页大小:
            <select id="selPageSize" v-model="nonconformanceVo.pageSize" @change="page('sel')">
                <option value="2">2</option>
                <option value="5">5</option>
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="50">50</option>
            </select>
        </div>
    </div>

</template>

<script>
module.exports = {
    data() {
        return {
            nonconformanceVo: {
                nonconformance: {
                    identifier: "",
                    selectStartTime: "",
                    selectEndTime: ""
                },
                currPage: 1,
                pageSize: 5,

            },
            totalPage: 1,
            totalNum: 0,

            nonconformances: [],
            newNonconformance: {
                user: {
                    id: 0
                },
                project: {
                    id: "请选择项目"
                },
                identifier: '',
                profile: '',
                inventoryBookkeeping: {
                    id: 0,
                    materialArchive: {
                        materialNumber: ''
                    },
                    batchNumber: '',
                    workOrderNumber: ''
                },
                basisDocuments: ''
            },
            projects: [
                {
                    id: 1,
                    name: "项目1"
                }
            ],

            loding: true,
            dialogTableVisible: false,
            dialogFormVisible: false,
            processVisible:false,
            viewProcessVisible:false,
            colum:-1,
            ActivitiHistoryInfoEntity:[],
            ActivitiCompleteEntity:{
                processDefinitionKey:'ncrId',
                instanceId:'',
                currUser:'',
                nextAssignees:['user2'],
                nextUsers:[]
            },
            users:[]
        }
    },
    created: function () {
        this.$http.post("/quality/ncr/getPageByCondition", this.nonconformanceVo).then(r => {
            if (r.data.code == "200") {
                this.nonconformances = r.data.data.data;
                console.log(r.data.data.data)
                this.nonconformanceVo.currPage = r.data.data.currPage;
                this.nonconformanceVo.pageSize = r.data.data.pageSize;
                this.totalPage = r.data.data.totalPages;
                this.totalNum = r.data.data.totalNums;
                this.loding = false;
            } else if (r.data.code == "701") {
                alert("登录已过期,请重新登录");
            } else if (r.data.code == "402") {
                alert("权限不足");
            } else {
                alert(r.data.msg);
            }
        });
        this.$http.post("/quality/query/allProject").then(r => {
            if (r.data.code == "200") {
                this.projects = r.data.data;
            } else if (r.data.code == "701") {
                alert("登录已过期,请重新登录");
            } else if (r.data.code == "402") {
                alert("权限不足");
            } else {
                alert(r.data.msg);
            }
        });
        this.$http.post("/quality/query/processUser/3").then(r => {
            if (r.data.code == "200") {
                this.users=r.data.data
            }  else {
                alert(r.data.msg);
            }
        })
    },
    methods: {
        page: function (p) {
            if (p == "start") {
                this.nonconformanceVo.currPage = 1;
            } else if (p == "end") {
                this.nonconformanceVo.currPage = this.totalPage;
            } else if (p == "up") {
                if (this.nonconformanceVo.currPage <= 1)
                    return;
                this.nonconformanceVo.currPage -= 1;
            } else if (p == "down") {
                if (this.nonconformanceVo.currPage >= this.totalPage)
                    return;
                this.nonconformanceVo.currPage += 1;
            } else if (p == "text") {
                let val = document.getElementById("currPage").value;
                if (!(val >= 1 && val <= this.totalPage))//非数字校验
                    document.getElementById("currPage").value = 1;
            } else if (p == "sel") {
                this.nonconformanceVo.currPage = 1;
            }
            this.loding = true;
            this.$http.post("/quality/ncr/getPageByCondition", this.nonconformanceVo).then(r => {
                if (r.data.code == "200") {
                    this.nonconformances = r.data.data.data;
                    this.nonconformanceVo.currPage = r.data.data.currPage;
                    this.nonconformanceVo.pageSize = r.data.data.pageSize;
                    this.totalPage = r.data.data.totalPages;
                    this.totalNum = r.data.data.totalNums;
                    this.loding = false;
                } else if (r.data.code == "701") {
                    alert("登录已过期,请重新登录");
                } else if (r.data.code == "402") {
                    alert("权限不足");
                } else {
                    alert(r.data.msg);
                }
            })
        },
        reset: function () {
            this.nonconformanceVo.nonconformance.identifier = "";
            this.nonconformanceVo.nonconformance.selectStartTime = "";
            this.nonconformanceVo.nonconformance.selectEndTime = "";
        },
        tableSel: function (val) {
            this.colum=val.id
            for(let i=0;i<this.nonconformances.length;i++){
                if(this.nonconformances[i].id==val.id){
                    this.colum=i;
                }
            }
        },
        ncrSubmit: function () {
            this.$http.post("/quality/query/inven", this.newNonconformance).then(r => {
                if (r.data.code == "200") {
                    this.newNonconformance.inventoryBookkeeping.id=r.data.data;

                    this.$http.post("/quality/ncr/add", this.newNonconformance).then(r => {
                        if (r.data.code == "200") {
                            // this.dialogFormVisible = false;
                            // location.reload();
                        } else if (r.data.code == "701") {
                            alert("登录已过期,请重新登录");
                        } else if (r.data.code == "402") {
                            alert("权限不足");
                        } else {
                            alert(r.data.msg);
                        }
                    })
                } else {
                    alert(r.data.msg);
                }
            })

        },
        initiate:function(){
            if(this.colum==-1){
                alert("请选择流程");
                return;
            };
            this.processVisible=true;
        },
        processSubmit:function(){
            if(this.nonconformances[this.colum].activitiState!="发起不符合项"){
                alert("当前阶段不可发起");
                return;
            }
            this.ActivitiCompleteEntity.instanceId=this.nonconformances[this.colum].activitiInstanceId;
            this.$http.post("/quality/ncr/initiateProcess", this.ActivitiCompleteEntity).then(r => {
                if (r.data.code == "200") {
                    // this.dialogFormVisible = false;
                    location.reload();
                } else if (r.data.code == "701") {
                    alert("登录已过期,请重新登录");
                } else if (r.data.code == "402") {
                    alert("权限不足");
                } else {
                    alert(r.data.msg);
                }
            })
        },
        del:function(){
            if(this.colum==-1){
                alert("请选择流程");
                return;
            };
            if(this.nonconformances[this.colum].activitiState!="发起不符合项"){
                alert("当前阶段不可删除");
                return;
            };
            this.$http.post("/quality/ncr/del/"+this.nonconformances[this.colum].id).then(r => {
                if (r.data.code == "200") {
                    // this.dialogFormVisible = false;
                    location.reload();
                } else if (r.data.code == "701") {
                    alert("登录已过期,请重新登录");
                } else if (r.data.code == "402") {
                    alert("权限不足");
                } else {
                    alert(r.data.msg);
                }
            })
            
        },
        viewProcess:function(){
            if(this.colum==-1){
                alert("请选择流程");
                return;
            };
            this.viewProcessVisible=true;
            console.log(this.colum)
            this.$http.post("/quality/ncr/history/"+this.nonconformances[this.colum].activitiInstanceId).then(r => {
                if (r.data.code == "200") {
                    console.log(r.data.data)
                    this.ActivitiHistoryInfoEntity=r.data.data;
                } else if (r.data.code == "701") {
                    alert("登录已过期,请重新登录");
                } else if (r.data.code == "402") {
                    alert("权限不足");
                } else {
                    alert(r.data.msg);
                }
            })
        }

    }
}

</script>

<style >
[class*='el-icon-']:before {
    font-family: element-icons !important;
}
</style>